import React, { memo, useEffect } from "react";
import { FindDetailStyle } from "./findDetail.style"
import { connect } from "react-redux";
import * as actions from "../store/actionCreators"
import Scroll from '@/baseUI/scroll'
import { useNavigate } from "react-router-dom";
const FindDetail = (props) => {

    let navigate = useNavigate();
    //  解构状态
    let { DetailData = {} } = props;

    //解构方法
    let { SetDetail } = props



    console.log(DetailData);
    useEffect(() => {
        Object.keys(DetailData).length === 0 ? "" : localStorage.setItem('details', JSON.stringify(DetailData));
        setTimeout(() => {
            SetDetail(JSON.parse(localStorage.getItem("details")));
        }, 200)
    }, [])
    const gohome = () => {
        navigate(-1);
    }

    return (
        <FindDetailStyle>
            <div className="navbar">
                <div className="navbar_left" onClick={gohome}><svg t="1642057754552" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1378" width="200" height="200"><path d="M727.28171457 968.45419457l78.06065778-69.77561284a1.16508445 1.16508445 0 0 0 0-1.68289976L375.94402765 513.4239921a1.16508445 1.16508445 0 0 1 0-1.68289975l429.3983447-383.70114371a1.16508445 1.16508445 0 0 0 0-1.68289975l-78.06065778-69.77561284a1.16508445 1.16508445 0 0 0-1.55344593 0L214.90346667 510.05819259a1.16508445 1.16508445 0 0 0 0 1.68289976 1.16508445 1.16508445 0 0 1 0 1.68289975 1.16508445 1.16508445 0 0 0 0 1.68289975l510.82480197 453.34730272a1.16508445 1.16508445 0 0 0 1.55344593 0z" fill="#888888" p-id="1379"></path></svg></div>
                <div className="navbar_mid">{DetailData.title}</div>
                <div className="navbar_right"><svg t="1642058749735" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8303" width="200" height="200"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="8304"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="8305"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="8306"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="8307"></path></svg></div>
            </div>

            <Scroll
                className="scroll"
                direction={'vertical'}
                refresh={false}
            >
                <div className="detailContainer">
                    <div className="titlebar">
                    </div>
                    <div className="piccontainer">
                        <img src={DetailData.picUrl} alt="" />
                    </div>
                    <div className="bodycontainer">
                        <div className="bodytitle">{DetailData.title}</div>
                        <div className="bodypicture">
                            <img src="https://gitee.com/jhqaq/tuchuang/raw/master/tupian/my/long.png" alt="" />
                        </div>
                    </div>
                </div>
            </Scroll>
            <div className="titlebar"></div>


        </FindDetailStyle>
    )
}
const mapStateToPorps = (state) => {
    return {
        DetailData: state.find.detailData
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        SetDetail(data) {
            dispatch(actions.getDetailCreate(data))
        }
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(memo(FindDetail))